<template>
  <div class="app">
    <a-breadcrumb style="margin-bottom: 10px">
      <a-breadcrumb-item>综治组织/ 综治队伍管理</a-breadcrumb-item>
    </a-breadcrumb>
    <a-row class="pd20 mt20">
      <a-col :span="5">
        分类名称：
        <a-select
          placeholder="请选择"
          v-model="queryForm.massDefenceId"
          style="width: 60%"
          filterable
          allow-clear
        >
          <a-select-option
            v-for="item in organizationList"
            :key="item.id"
            :value="item.id"
          >
            {{ item.name }}
          </a-select-option>
        </a-select>
      </a-col>
      <a-col :span="5">
        队伍名称：
        <a-input placeholder="请输入" v-model="queryForm.teamName" />
      </a-col>
      <a-col :span="10">
        创建时间范围：
        <a-range-picker @change="onChange" v-model="dateRange" />
      </a-col>
      <a-col :span="4">
        <a-button type="primary" @click="getList"> 查询 </a-button>&emsp;&nbsp;
        <a-button @click="cleanQuery">重置</a-button>
      </a-col>
    </a-row>
    <a-row class="pd20 mt20">
      <div class="btn_box">
        <a-button
          type="primary"
          @click="addFn"
          v-hasPermi="['zhonghe:qfqzzzdwgl:add']"
          >添加</a-button
        >
      </div>
      <a-spin :spinning="loading">
        <a-table
          :scroll="{ x: 500 }"
          :columns="columns"
          :data-source="tableData"
          :pagination="false"
          :row-key="(record) => record.id"
        >
          <span slot="status" slot-scope="text, record">
            <a-switch
              :checked="record.status === 0"
              @change="
                (checked) =>
                  changeStatus({
                    id: record.id,
                    status: record.status === 0 ? 1 : 0,
                  })
              "
            />
          </span>
          <span slot="action" slot-scope="text, record">
            <a @click="view(record)" v-hasPermi="['zhonghe:qfqzzzdwgl:view']"
              >查看</a
            >
            <a-divider type="vertical" />
            <a @click="editFn(record)" v-hasPermi="['zhonghe:qfqzzzdwgl:edit']"
              >修改</a
            >
            <a-divider type="vertical" />
            <a
              @click="delFn(record)"
              class="red"
              v-hasPermi="['zhonghe:qfqzzzdwgl:del']"
              >删除</a
            >
          </span>
        </a-table>
        <div class="page_box">
          <a-pagination
            v-model="queryForm.offset"
            :page-size-options="['20', '30', '40', '50']"
            :total="total"
            show-size-changer
            :page-size="queryForm.current"
            @showSizeChange="onShowSizeChange"
            @change="pageChange"
            :show-total="(total) => `共 ${total} 条`"
          ></a-pagination>
        </div>
      </a-spin>
    </a-row>
    <a-modal
      :title="title"
      :visible="dialogVisible"
      width="30%"
      @cancel="dialogVisible = false"
    >
      <a-form :form="form" :label-col="{ span: 5 }" :wrapper-col="{ span: 19 }">
        <a-form-item label="队伍名称">
          <template v-if="type === 'View'">
            {{ currentRecord.teamName }}
          </template>
          <a-input
            v-else
            style="width: 100%"
            v-decorator="[
              'teamName',
              {
                rules: [{ required: true, message: '请输入队伍名称' }],
              },
            ]"
            placeholder="请输入队伍名称"
          />
        </a-form-item>
        <a-form-item label="分类名称">
          <template v-if="type === 'View'">
            {{ currentRecord.massDefenceClassName }}
          </template>
          <a-select
            v-else
            style="width: 100%"
            @change="getName"
            v-decorator="[
              'massDefenceId',
              {
                rules: [{ required: true, message: '请选择分类名称' }],
              },
            ]"
            placeholder="请选择分类名称"
          >
            <a-select-option
              v-for="item in organizationList"
              :key="item.id"
              :value="item.id"
            >
              {{ item.name }}
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="备注">
          <template v-if="type === 'View'">
            {{ currentRecord.teamDesc }}
          </template>
          <a-textarea
            v-else
            style="width: 100%"
            v-decorator="[
              'teamDesc',
              {
                rules: [{ required: false }],
              },
            ]"
            :rows="4"
            placeholder="请输入备注"
          />
        </a-form-item>
      </a-form>
      <template slot="footer">
        <BtnFooter
          :loading="submitLoading"
          :isShowOk="type !== 'View'"
          @cancel="dialogVisible = false"
          @ok="handleSubmit"
        />
      </template>
    </a-modal>
  </div>
</template>

<script>
import crudMixin from "@/mixins/crudMixin";
import BtnFooter from "@/component/btnFooter.vue";
export default {
  mixins: [crudMixin],
  components: {
    BtnFooter,
  },

  data() {
    return {
      organizationList: [],
      dateRange: [],
      // 请求配置 - 这里定义每个操作的请求格式
      requestConfig: {
        Add: {
          method: "post",
          type: "formData", // 新增请求使用 formData 格式
          url: "/government-platform-center/massDefenceTeam",
        },
        Edit: {
          method: "post",
          type: "formData", // 修改请求使用 JSON 格式
          url: "/government-platform-center/massDefenceTeam/edit",
        },
        Del: {
          method: "post",
          type: "formData", // 删除请求使用 formData 格式
          url: "/government-platform-center/massDefenceTeam/deleteById",
        },
        Detail: {
          method: "get",
          type: "json",
          url: "",
        },
        Get: {
          method: "get",
          type: "json",
          url: "/government-platform-center/massDefenceTeam",
        },
      },
      // 模态框配置
      modalConfig: {
        addTitle: "新增队伍",
        editTitle: "修改队伍",
        viewTitle: "查看队伍",
        deleteConfirm: "确定要删除该队伍吗？删除后不可恢复！",
      },

      // 表单对象
      form: this.$form.createForm(this, { name: "coordinated" }),

      // 列配置
      columns: [
        {
          title: "序号",
          dataIndex: "index",
          key: "index",
          customRender: (text, record, index) => {
            return (
              (this.queryForm.offset - 1) * this.queryForm.current + index + 1
            );
          },
        },
        {
          title: "分类名称",
          dataIndex: "massDefenceClassName",
          key: "massDefenceClassName",
        },
        {
          title: "队伍名称",
          dataIndex: "teamName",
          key: "teamName",
        },
        {
          title: "备注",
          dataIndex: "teamDesc",
          key: "teamDesc",
        },
        {
          title: "队伍数量",
          dataIndex: "teamNumber",
          key: "teamNumber",
        },
        {
          title: "状态",
          dataIndex: "status",
          key: "status",
          scopedSlots: { customRender: "status" },
        },
        {
          title: "创建时间",
          dataIndex: "createTime",
          key: "createTime",
        },
        {
          title: "操作",
          key: "action",
          scopedSlots: { customRender: "action" },
        },
      ],
      // 表单额外参数
      formConfig: {
        status: 0,
      },
    };
  },

  methods: {
    getName(val) {
      const item = this.organizationList.find((item) => item.id === val);
      this.formConfig.massDefenceClassName = item.name;
    },
    formatAddData() {
      return this.formConfig;
    },
    addFn() {
      this.add();
    },
    editFn(val) {
      this.getOrganizationList();
      this.edit(val);
    },
    delFn(val) {
      this.del(val);
    },
    // 处理状态改变
    onStatusChange(checked, record) {
      const url = "/government-platform-center/organization/updateStatus";
      const params = {
        id: record.id,
        status: checked ? 1 : 0, // 转换为后端需要的数字类型
      };

      this.$axios
        .post(url, params)
        .then((res) => {
          if (res.data.code === 0) {
            this.$message.success("状态修改成功");
            this.getList();
          } else {
            this.$message.error(res.data.msg || "操作失败");
          }
        })
        .catch((err) => {
          console.error("状态更新错误:", err);
          this.$message.error("操作失败");
        });
    },
    reset() {
      this.dateRange = [];
      this.cleanQuery();
    },
    // 处理日期范围变化
    onChange(dates, dateStrings) {
      if (dates) {
        this.queryForm.startTime = dateStrings[0];
        this.queryForm.endTime = dateStrings[1];
      } else {
        this.queryForm.startTime = null;
        this.queryForm.endTime = null;
      }
    },
    // 获取机构分类
    getOrganizationList() {
      this.$axios
        .get(
          "/government-platform-center/massDefenceTeam/queryMassDefenceTypeList"
        )
        .then((res) => {
          this.organizationList = res.data.data || [];
        });
    },
  },

  mounted() {
    this.getList();
    this.getOrganizationList();
  },
};
</script>

<style lang="scss" scoped>
.ant-row {
  border-radius: 5px;
  background: #fff;
  color: #000;
}

v-deep {
  .ant-table-thead > tr > th {
    color: #000;
    font-weight: bold;
  }
  .ant-table-tbody > tr > td {
    color: #000;
  }
  .el-table thead {
    color: black;
    font-weight: bold;
    background: #fafafa;
  }
  .el-table th.el-table__cell {
    background: #fafafa;
  }
}

.ant-col {
  margin: 10px 0;
}

.ant-select {
  width: 60%;
}

.ant-input {
  width: 60%;
}

@media screen and (max-width: 1300px) {
  .el-input {
    width: 70%;
  }

  .el-select {
    width: 70%;
  }

  .app {
    width: calc(100% - 50px);
  }
}

@media screen and (max-width: 1100px) {
  .el-input {
    width: 90%;
  }

  .el-select {
    width: 90%;
  }
}
.img {
  width: 50px;
  height: 50px;
}
.btn_box {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
}
</style>
